<template>
  <div class="my">
    <div class="head">
      <div class="headImg">
        <img :src="userinfo.avatar" alt="" srcset="" @click="toeditProfile" />
      </div>
      <div class="user">
        <div class="username">
          <div class="title" @click="toeditProfile">{{ userinfo.nickname }}</div>
          <div class="sex" v-if="userinfo.sex == 2" @click="toeditProfile">
            <img src="../../assets/myicon/nv.png" alt="" srcset="" /><span class="age">{{ userinfo.age }}</span>
          </div>
          <div class="sex" v-if="userinfo.sex == 1" style="background: #cde1fd;" @click="toeditProfile">
            <img src="../../assets/myicon/nan.png" width="12px" alt="" srcset="" /><span class="age"
              style="color:  #3662EC;">{{ userinfo.age }}</span>
          </div>
          <div class="vip" v-if="userinfo.is_svip != 0">VIP</div>
          <div class="authentication">
            <img src="../../assets/myicon/certified.png" alt="" />
          </div>
        </div>
        <div class="edit" @click="goDetail('/userDetail')">
          <span>个人主页<img src="../../assets/myicon/edit.png" alt="" /></span>
        </div>
        <div class="userData">
          <div @click="Goto('/userlist?type=follows')">关注&nbsp;{{ userinfo.follows }}</div>
          <div @click="Goto('/userlist?type=fans')">粉丝&nbsp;{{ userinfo.fans }}</div>
          <div @click="Goto('/mytrends')">动态&nbsp;{{ userinfo.dynamics }}</div>
        </div>
      </div>
    </div>
    <div class="tablist">
      <div class="tab" v-for="(item, index) in tablist" :key="index" :style="'background-color:' + item.color + ';'"
        @click="Goto(item.url)">
        <img class="tabimg" :src="item.img" alt="" />
        <div class="title">
          <p class="title1">{{ item.title }}</p>
          <p class="title2">
            {{ item.text }}&nbsp;<img v-if="index == 3" src="../../assets/myicon/arrow-right-diamond.png" alt=""
              srcset="" />
          </p>
        </div>
      </div>
    </div>
    <div class="box">
      <div class="boxlist" @click="GoAttestation()">
        <img src="../../assets/myicon/me-authentication.png" alt="" />
        我要认证
      </div>
      <div class="boxlist" @click="Goto('/album')">
        <img src="../../assets/myicon/me-albums.png" alt="" />
        我的相册
      </div>
      <div class="boxlist" @click="Goto('/mytrends')">
        <img src="../../assets/myicon/me-dt.png" alt="" />
        我的动态
      </div>
      <div class="boxlist" @click="Goto('/mydianping')">
        <img src="../../assets/myicon/me-comments.png" alt="" />
        我的点评
      </div>
      <div class="boxlist" @click="Goto('/glance')">
        <img src="../../assets/myicon/me-footprint.png" alt="" />
        访客足迹
      </div>
      <div class="boxlist"  @click="rengong()">
        <img src="../../assets/myicon/me-service.png" alt="" />
        人工客服
      </div>
      <div class="boxlist" @click="Goto('/setting')">
        <img src="../../assets/myicon/me-setting.png" alt="" />
        平台设置
      </div>
    </div>
    <van-popup v-model="isshow" class="error">
      <p class="error-title">温馨提示</p>
      <p class="error-title1">已实名认证通过,无需再次认证</p>
      <van-button type="info" style="width: 180px;margin-top: 20px;" @click="isshow=false" size="small">知道了</van-button>
    </van-popup>
    <van-popup v-model="isshow" class="error">
      <p class="error-title">温馨提示</p>
      <p class="error-title1">已实名认证通过,无需再次认证</p>
      <van-button type="info" style="width: 180px;margin-top: 20px;" @click="isshow=false" size="small">知道了</van-button>
    </van-popup>
  </div>
</template>

<script>
import { getMyInfo } from '@/api/index'
import { getSiteConfig } from '@/api/setting'
import md5 from 'js-md5';

export default {
  name: 'MY',
  data() {
    return {
      userinfo: {},
      kefu_url:'',
      isshow:false,
      isshow:false,
      tablist: [
        {
          title: '成为商家',
          img: require('@/assets/myicon/me-merchant.png'),
          text: '说明文案',
          url: '/business?type=add',
          color: 'rgba(252, 219, 219, 0.5)',
        },
        {
          title: '邀请好友',
          img: require('@/assets/myicon/me-invite.png'),
          text: '说明文案',
          url: '/invitation',
          color: 'rgba(205, 225, 253, 0.5)',
        },
        {
          title: '会员中心',
          img: require('@/assets/myicon/me-vip.png'),
          text: '开通立享8大特权',
          url: '/vip/info',
          color: 'rgba(255, 229, 204, 0.5)',
        },
        {
          title: '我的钻石',
          img: require('@/assets/myicon/me-diamond.png'),
          text: '0钻石',
          url: '/income',
          color: 'rgba(231, 212, 255, 0.5)',
        },
      ],
    }
  },
  created(){
    
  },
  mounted() {
    this.GetUser()
    this.getkefu()
    
  },
  methods: {
    GoAttestation(){
      if(this.$store.state.userInfo.is_authentication==1){
        this.isshow=true
      }else {
        this.$router.push('/attestation')

      //    GetBaiduToken().then((res) => {
      //   console.log(res)
        
      //   this.$store.commit('SET_BAIDU_TOKEN', res.data.access_token)
      // })

      //    GetBaiduToken().then((res) => {
      //   console.log(res)
        
      //   this.$store.commit('SET_BAIDU_TOKEN', res.data.access_token)
      // })

      }
    },
     getkefu(){
     
       getSiteConfig().then((res) => {
        console.log(res)
        this.kefu_url=res.data.kefu_url
        
        // this.$store.commit('SET_USERINFO', res.data)
        // }
      })
    },
    rengong(){
       window.location.href=this.kefu_url
    },
    goDetail() {
      if (this.$store.state.userInfo.is_merchant) {
        this.$router.push('/detail')
      } else {
        this.$router.push('/userDetail')
      }
    },
    Goto(e) {
      if(e=='/vip/info'){
        window.location.href='https://www.seyou1.vip/h5/member?token='+md5(this.$store.state.token)
        return
      }
      this.$router.push(e)
    },
    GetUser() {
      getMyInfo().then((res) => {
        console.log(res.data)

        // if (!res.data.user.is_cancel) {
        //是否已完成基础信息
        this.userinfo = res.data
        console.log(this.userinfo);
        this.$store.commit('SET_USERINFO', res.data)
        // }
      })
    },
    //跳转修改我的信息页面
    toeditProfile(){
      this.$router.push({
          path: '/editProfile',
        })
    }
  },
}
</script>

<style lang="scss" scoped>
.my {
  background: url('../../assets/myicon/bg.png');
  width: 100%;
  overflow: hidden;
  height: 100vh;
  font-family: PingFang SC;
  color: #1a1a1a;
  background-color: #f3f3f3;
}

.head {
  display: flex;
  width: 90%;
  margin: 0 auto;
  margin-top: 71px;

  .headImg {
    width: 80px;
    margin-right: 15px;
    height: 80px;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }

  .user {
    width: 190px;

    .username {
      display: flex;
      // justify-content: space-between;
      font-family: PingFangSC-Medium, PingFang SC;

      // .title,.sex,.vip,.authentication{
      //     display: inline-block;
      //     margin-right: 8px;
      // }
      .title {
        font-size: 16px;
        font-weight: 500;
        height: 16px;
        margin-right: 7px;

        line-height: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
      }

      .sex {
        background-color: #fcdbdb;
        border-radius: 8px;
        height: 16px;
        width: 38px;
        text-align: center;
        margin-right: 7px;
        line-height: 16px;
        color: #fa5151;

        img {
          margin-right: 2px;
          width: 8px;
          display: inline-block;
          margin-top: 3px;
          height: 12px;
        }

        .age {
          display: inline-block;
          vertical-align: top;
          font-size: 12px;
          margin-top: 3px;
          line-height: 12px;
          height: 12px;
        }
      }

      .vip {
        width: 30px;
        margin-right: 7px;

        height: 16px;
        background: linear-gradient(180deg, #e8b87a 0%, #fde0b9 100%);
        border-radius: 8px;
        text-align: center;
        line-height: 17px;
        vertical-align: top;
        font-size: 12px;
        color: #663409;
      }
    }

    .edit {
      margin-top: 12px;
      color: #3662ec;

      span {
        // background: linear-gradient(180deg, #3764EC 0%, #6B85F7 100%);
        background-color: rgba(107, 133, 247, 0.3);
        border-radius: 9px;
        padding: 3px 7px;
        font-size: 12px;

        img {
          vertical-align: text-bottom;
          width: 12px;
          margin-left: 3px;
          height: 12px;
        }
      }
    }

    .userData {
      margin-top: 12px;
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
  }
}

.tablist {
  display: flex;
  width: 90%;
  margin: 0 auto;
  margin-top: 28px;
  justify-content: space-between;
  flex-wrap: wrap;

  .tab {
    width: 160px;

    border-radius: 8px;
    overflow: hidden;
    height: 64px;
    margin-top: 16px;

    .tabimg {
      display: inline-block;
      margin: 16px;
      margin-right: 7px;
    }

    .title {
      display: inline-block;
      vertical-align: top;
      margin: 18px 0;
    }

    .title1 {
      color: #1a1a1a;
      line-height: 14px;
      font-size: 14px;
      margin-bottom: 5px;
      font-weight: 600;
      font-family: PingFangSC-Regular, PingFang SC;
    }

    .title2 {
      color: #767676;
      line-height: 12px;
      font-size: 12px;

      img {
        vertical-align: text-bottom;
      }
    }
  }
}

.box {
  width: 90%;
  height: 150px;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  margin-top: 32px;
  background-color: rgba(255, 255, 255, 0.8);

  .boxlist {
    width: 25%;
    height: 50%;
    text-align: center;
    font-size: 14px;
    line-height: 10px;

    img {
      display: block;
      width: 24px;
      height: 24px;
      margin: 16px auto 8px auto;
    }
  }
}
.error{
  width: 70%;
  border-radius: 10px;
  height: 150px;
  text-align: center;
  background-color: #fff;
}
.error-title{
  margin-top: 30px;
  font-size: 16px;
  font-weight: 700;
}
.error-title1{
  margin-top: 10px;
  font-size: 12px;
}
  </style>
}
.error{
  width: 70%;
  border-radius: 10px;
  height: 150px;
  text-align: center;
  background-color: #fff;
}
.error-title{
  margin-top: 30px;
  font-size: 16px;
  font-weight: 700;
}
.error-title1{
  margin-top: 10px;
  font-size: 12px;
}
  </style>